<template>
    <div id="graphChart"></div>
</template>

<script>
export default {
    data() {
        return {
            myChart: null,// echarts实例载体
        }
    },
    props: ['articleRelationData','resizeOrNot'],
    watch: {
        articleRelationData: {
            deep: true,
            handler() {
                this.echartsInit()
            }
        },
        resizeOrNot: {
            handler() {
                this.myChart.resize()
            }
        }
    },
    methods: {
        // 初始化echarts
        echartsInit() {
            // 初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById('graphChart'))
            let option = {
                title: {
                    text: '博客关系图',
                    textStyle: {
                        fontSize: '20',
                        color: '#fff'
                    },
                    left: 'center'
                },
                legend: [ // 图例选项
                    {
                        data: this.articleRelationData.chartCategories,
                        textStyle: {
                            color: '#fff'
                        },
                        bottom: 0,
                    }
                ],
                series: [{
                    layout: 'force', // 采用力引导布局
                    roam: true, // 是否开启鼠标缩放和平移漫游。
                    focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
                    label: { // 节点name描述
                        show: true,
                        position: 'inside',
                        color: '#fff',
                    },
                    type: 'graph', // 关系图
                    force: { // 力传导配置
                        repulsion: 100,
                        edgeLength: [20, 100]
                    },
                    data: this.articleRelationData.chartData, // 图表数据
                    categories: this.articleRelationData.chartCategories, // 图表数据类别
                    links: this.articleRelationData.chartLink, // 图表数据关系
                }]
            }
            this.myChart.setOption(option)
        }
    },
    mounted() {
        // 初始化echarts图表
        this.echartsInit()
    },
}
</script>

<style lang="scss" scoped>
#graphChart {
    height: 100%;
    width: 100%;
}
</style>